
<template>
    <!-- 搜素区域 -->
    <el-card class="box-card">
        <el-input placeholder="请输入你想搜索的文章标题" v-model="searchTitle" />
        <el-input placeholder="请输入你想搜索的作者" style="margin-left:10px" v-model="searchName" />
        <el-button type="primary" style="margin-left:20px" @click="search">搜索</el-button>
    </el-card>
    <!-- 表格区域 -->
    <el-card class="box-card" style="margin-top:20px">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="作者" />
            <el-table-column prop="img" label="作者头像" v-slot="{ row }">
                <el-avatar :src="row.img" />
            </el-table-column>
            <el-table-column prop="title" label="标题" v-slot="{ row }">
                <el-tooltip class="box-item" effect="dark" :content="row.title" placement="top-start">
                    <span class="content">{{ row.title }}</span>
                </el-tooltip>

            </el-table-column>
            <el-table-column prop="content" label="内容" v-slot="{ row }">
                <el-tooltip class="box-item" effect="dark" :content="row.content" placement="top-start">
                    <span class="content">{{ row.content }}</span>
                </el-tooltip>
            </el-table-column>


            <el-table-column prop="origin" label="起源" />
            <!-- <el-table-column prop="imgPath" label="文章封面" v-slot="{ row }">
                <el-avatar :src="row.imgPath"></el-avatar> </el-table-column> -->
            <el-table-column prop="status" label="是否审核" v-slot="{ row }">
                <el-switch v-model="row.status" class="ml-2" @change="changeStatus(row)"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
            </el-table-column>
            <el-table-column label="操作" v-slot="{ row }">
                <el-button link type="danger" @click="del(row)">删除</el-button>

            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[2, 4, 6, 8]" :small="small"
            :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total=total
            @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top:20px" />

    </el-card>
</template>

<script setup >
import { onMounted, ref } from "vue"
import api from "../../utils/request"
import { ElMessage, ElMessageBox } from 'element-plus'



const tableData = ref([])
const total = ref()
const page = ref(1)
const pageSize = ref(4)
const searchTitle = ref("")
const searchName = ref("")

onMounted(() => {
    getData()
})


//获取数据
const getData = async () => {
    let result = await api.get(`/js/re_find?page=${page.value}&&pageSize=${pageSize.value}&&searchTitle=${searchTitle.value}&&searchName=${searchName.value}`)
    tableData.value = result.data.data
    total.value = result.data.total
}
//
const changeStatus = async (row) => {
    console.log(row);
    let result = await api.put(`/js/find_edit/${row._id}`, {
        status: row.status
    })
    if (result.data.code === 200) {
        ElMessage.success("审核修改成功")
        getData()

    }
}

//分页
const handleSizeChange = (val) => {
    pageSize.value = val
    getData()
}
const handleCurrentChange = (val) => {
    page.value = val
    getData()
}

//搜索
const search = () => {
    getData()
}

//删除
const del = (row) => {
    ElMessageBox.confirm(
        '是否要删除?',
        'Warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(() => {
            console.log(11111);
            api.delete(`/js/find_del/${row._id}`).then((val) => {
                if (val.data.code === 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getData()


                }

            })



        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}









</script>

<style lang="less" scoped>
.box-card {
    width: 99%;
}

.el-input {
    width: 230px;
}

.content {
    display: block;
    width: 100px;
    /* 你可以根据需要调整这个值 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>